<template>
  <view class="whole">
    <view class="top_view"></view>
    <view class="title">
      <image
        src="../../static/jiantous.png"
        mode=""
        style="width: 34rpx; height: 34rpx; margin-left: 30rpx"
        @click="returns()"
      ></image>
      <text style="font-size: 34rpx; color: #ffffff; font-weight: bold"
        >邀请排行</text
      >
      <view style="opacity: 0.01"> 1123</view>
    </view>
    <view class="">
      <view class="top" @click="toInvitationRanking">
        <view class="top_left">
          <view class="top_left_top">
            <text>我的邀请排行</text>
            <text class="top_left_top_item">{{ list.current_ranking }}</text>
          </view>
          <text v-if="!wholestate">目前已邀请位，查看邀请人明细</text>
          <text v-else
            >目前已邀请{{ list.invitation_num }}位，查看邀请人明细</text
          >
        </view>
        <image
          src="../../static/jiantou.png"
          mode=""
          style="width: 28rpx; height: 28rpx"
        ></image>
      </view>
      <view class="bottom" v-if="wholestate">
        <view class="bottom_top" style="">
          <text>邀请排行榜</text>
        </view>
        <view class="" v-if="list.invitation_ranking.length > 0">
          <scroll-view
            scroll-y="true"
            style="max-height: 500px"
            @scrolltolower="scrollLower"
          >
            <block
              v-for="(item, index) in list.invitation_ranking"
              :key="index"
            >
              <view class="bottom_list">
                <view class="bottom_list_left">
                  <image
                    src="../../static/gold_medal.png"
                    mode=""
                    style="width: 50rpx; height: 50rpx; margin: 0 16rpx"
                    v-if="index == 0"
                  ></image>
                  <image
                    src="../../static/Silver_medal.png"
                    mode=""
                    style="width: 50rpx; height: 50rpx; margin: 0 16rpx"
                    v-else-if="index == 1"
                  >
                  </image>
                  <image
                    src="../../static/Bronze_medal.png"
                    mode=""
                    style="width: 50rpx; height: 50rpx; margin: 0 16rpx"
                    v-else-if="index == 2"
                  >
                  </image>

                  <!-- 	<text class="bottom_list_sort"
										v-else-if="list.invitation_ranking[index].invitation_num == list.invitation_ranking[index-1].invitation_num">
										<text v-if="index<9">0</text>{{index}}</text> -->

                  <text class="bottom_list_sort" v-else
                    ><text v-if="index < 9">0</text>{{ item.ranking }}</text
                  >
                  <image
                    :src="item.avatar"
                    style="width: 80rpx; height: 80rpx; border-radius: 45%"
                    mode="scaleToFill"
                    v-if="item.avatar != null"
                  ></image>
                  <image
                    src="/static/default-avatar.png"
                    style="width: 80rpx; height: 80rpx"
                    mode="scaleToFill"
                    v-else
                  ></image>
                  <text style="font-weight: 500; margin-left: 20rpx">{{
                    item.account
                  }}</text>
                </view>
                <view>
                  <text class="bottom_list_right">{{
                    item.invitation_num
                  }}</text>
                  <text>人</text>
                </view>
              </view>
              <view
                v-if="index != list.invitation_ranking.length - 1"
                style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
              ></view>
              <view
                class=""
                style="
                  text-align: center;
                  padding: 30rpx 0 40rpx;
                  color: #666666;
                "
                v-if="
                  index == list.invitation_ranking.length - 1 && lengthsstate
                "
              >
                <text style="">— 没有更多啦 —</text>
              </view>
            </block>
          </scroll-view>
        </view>
        <view v-else>
          <image
            src="/static/NoData.png"
            mode=""
            style=""
            class="Nodata"
          ></image>
          <view
            class=""
            style="text-align: center; padding: 0rpx 0 30rpx; color: #666666"
          >
            <text style="">— 暂无数据 —</text>
          </view>
        </view>
      </view>
      <view class="" style="height: 50rpx"> </view>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      list: [],
      lengths: "",
      page: 1,
      lengthsstate: false,
      wholestate: false,
    };
  },
  onLoad() {
    this.invitationList();
    this.lengths = uni.getStorageSync("userInfo").invitation_num;
  },
  // //上拉触底
  // onReachBottom() {
  // 	this.page++
  //   console.log('12121')
  //   this.invitationList()
  // },
  methods: {
    scrollLower(e) {
      // console.log("onpulling", e);
      // this.page++
      // this.invitationList()
    },
    async invitationList() {
      let res = await api.invitationRanking({
        query: {
          page: this.page,
        },
      });
      if (res.code == 0) {
        this.wholestate = true;
        if (this.page == 1) {
          this.list = res.data;
        } else {
          // this.list = [...this.list,...res.data.invitation_ranking]
          if (res.data.invitation_ranking.length == 0) {
            this.lengthsstate = true;
          }
          res.data.invitation_ranking.forEach((el, index) => {
            this.list.invitation_ranking.push(
              res.data.invitation_ranking[index]
            );
          });
        }
        // let ranking = 1;
        // let len = this.list.invitation_ranking.length;
        this.list.invitation_ranking.forEach((el, index) => {
          var reg = /^(\d{3})\d{4}(\d{4})$/;
          el.account = el.account.replace(reg, "$1****$2");
          // el.ranking = ranking
          // if (index < len - 1 && this.list.invitation_ranking[index] . invitation_num !=this.list.invitation_ranking[index + 1] . invitation_num) {
          // 	ranking++;
          // }
        });
      }
      console.log(this.list);
    },
    returns() {
      uni.navigateBack({
        delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    toInvitationRanking() {
      // uni.navigateBack({
      //   delta: 1,
      // });

      uni.navigateTo({
        url: "../invitation_people/invitation_people",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
  background-image: url("/static/background_login.png");
  // background-image: url('http://img.senbiaojita.cn/background_login.png');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-attachment: fixed;
  /* background-size: cover; */
  background-size: 100%;

  .title {
    position: absolute;
    top: 116rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin: 0 40rpx;
    font-size: 28rpx;
    padding-top: 210rpx;

    .top_left {
      display: flex;
      flex-direction: column;
    }

    .top_left_top {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10rpx;

      .top_left_top_item {
        margin-left: 20rpx;
        font-size: 48rpx;
      }
    }
  }

  .bottom {
    border: 2rpx solid transparent;
    // background-color: $bg-color3;
    background: linear-gradient(
      180deg,
      rgba(64, 67, 67, 0) 0%,
      #1e2020 22%,
      #1e2020 100%
    );
    // margin: 30rpx 30rpx 0;
    margin: 30rpx 0 0;
    border-radius: 24rpx;

    .bottom_top {
      color: $text-color3;
      text-align: center;
      margin-top: 50rpx;
      margin-bottom: 30rpx;
    }

    .bottom_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      margin: 30rpx 30rpx;

      .bottom_list_left {
        display: flex;
        align-items: center;

        .bottom_list_sort {
          font-size: 36rpx;
          margin: 0 20rpx;
        }
      }

      .bottom_list_right {
        font-size: 40rpx;
        font-weight: 600;
        margin-left: 10rpx;
      }
    }
  }
}

.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;

  z-index: 999;
  background-image: url("/static/background_login.png");
  // background-image: url('http://img.senbiaojita.cn/background_login.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;

  background-color: #111218;
}
.Nodata {
  position: relative;
  left: 20%;
  transform: translate(0%, -0%);
  width: 400rpx;
  height: 300rpx;
  padding-top: 30rpx;
}
</style>
